import {defineConfig} from 'vite';
import {resolve} from 'path';

export default defineConfig({
  optimizeDeps: {
    include: ['lodash'], // 进行依赖预构建的模块
    exclude: ['lodash-es'] // 不进行依赖预构建的模块
  },
  envPrefix: 'VITE-', // 向外暴露的环境变量的前缀
  publicDir: './public', // public目录的路径
  resolve: {
    alias: { // 路径别名，避免路径过长
      '@': resolve(__dirname, './src'),
      '@assets': resolve(__dirname, './src/assets'),
      '@components': resolve(__dirname, './src/components'),
    }
  },
  base: '/url', // 公共基础路径
  build: { // 生产打包相关
    rollupOptions: { // rollup构建策略相关
      input: { // 多页面(入口文件)应用
        index: resolve(__dirname, 'index.html'),
        subIndex: resolve(__dirname, 'sub-index/index.html'),
      },
      output: { // 构建输出相关
        assetFileNames: '[name]__[hash].[ext]', // 构建结果中静态资源命名规则
      }
    },
    outDir: 'dist', // 输出目录的路径
    assetsDir: 'static', // 输出目录中静态资源的路径
  },
  css: { // CSS行为相关
    modules: { // CSS模块化相关，文件名以module.css结束的CSS被认为模块化
      localsConvention: 'camelCaseOnly', // CSS文件中键名的转换规则
      generateScopedName: '[name]_[local]_[hash:5]', // CSS类名规则，CSS模块化会重命名类名
      hashPrefix: 'hashPrefix', // 产生HASH的前缀，使产生的HASH值更独特
      globalModulePaths: ['./componentB.module.css'], // 不进行CSS模块化的CSS文件
    },
    preprocessorOptions: { // CSS预处理相关，键值表示预处理器名称
      less: { // less支持css嵌套写法、css值为表达式和设置变量@xxx等，less所支持的浏览器无法识别的特性最终都会被lessc编译再交给浏览器
        math: 'always', // 表达式计算
        globalVars: { // less全局变量，即less中设置的变量@xxx
          mainColor: 'red',
        }
      },
    },
    devSourcemap: true, // CSS文件索引用于将编译后的CSS指向源代码位置（编译后的文件通常和源代码不同）
    postcss: { // postCSS相关
      // postCSS保证CSS万无一失，进行语法降级和前缀补全--webkit等操作，类似于保证JS执行万无一失的Babel
    },
  },
});